<!DOCTYPE html>

<html class="no-js css-menubar" lang="zh-cn">

<head>
	<title>分组信息</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 移动设备 viewport -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

	<!-- 样式 -->
	<link rel="stylesheet" href="../public/themes/classic/global/css/bootstrap.css">
	<link rel="stylesheet" href="../public/fonts/font-awesome/font-awesome.css">
	<link rel="stylesheet" href="../public/fonts/web-icons/web-icons.css">
	<link rel="stylesheet" href="../public/themes/classic/base/css/site.css?v=1.0.0" id="admui-siteStyle">
	<link rel="stylesheet" href="../public/vendor/dataTables-bootstrap/dataTables.bootstrap.css">
	<link rel="stylesheet" href="../public/vendor/datatables-responsive/dataTables.responsive.css" />
	<style>
		@media (min-width: 768px)
		.modal-top {
			margin: 0 auto !important;
		}
	</style>
	<script src="../public/vendor/jquery/jquery.min.js"></script>
	<script src="../js/common.js"></script>
	<script src="../public/vendor/vue/vue.min.js"></script>
	<script src="../public/vendor/bootstrap/bootstrap.min.js"></script>
	<!--layer弹窗-->
	<script src="../public/vendor/layer/layer.js"></script>
	<script src="../public/vendor/laydate/laydate.js"></script>

</head>

<body class="layout-full">
<div class="page animation-fade page-blank" id="app">
	<div class="page-content">
		<div class="panel">
			<div class="panel-heading">
			</div>
			<div class="panel-body padding-top-10">
				<div class="col-xs-12">
					<form class="form-inline pull-right" id="search-form">
						<!-- <div class="form-group">
							<input class="form-control input-sm" id="username" name="username" placeholder="用户名" autocomplete="off" type="text">
						</div>
						<div class="form-group">
							<button type="button" class="btn btn-primary btn-sm" onclick="search(true)"><i class="fa fa-search" aria-hidden="true"></i> 搜索</button>
							<button type="reset" class="btn btn-primary btn-sm" >重置</button>

						</div> -->
						<div class="form-group">
							<button type="button"  class="btn btn-icon btn-primary btn-sm" onclick="layer_show('编辑', 'groupInfoEdit.html', '650', '500', true)">
								<i class="fa fa-pencil" aria-hidden="true"></i> 编辑
							</button>
							<button type="button" class="btn btn-icon btn-primary btn-sm" data-target="#importGroupInfo" data-toggle="modal">
								创建分组
							</button>
						</div>
						<div class="form-group">
							<button type="button" class="btn btn-icon btn-primary btn-sm" onclick="exportExcel()">
								导出分组
							</button>
						</div>
					</form>
				</div>
				<div class="col-xs-12">
					<table class="table table-bordered table-hover dataTable table-striped width-full" id="dataTable">
						<thead>
						<tr>
							<th></th>
							<th>ID</th>
							<th>小组名称</th>
							<th>抽签时间</th>
							<th>结束时间</th>
							<th>小组人数</th>
						</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade modal-3d-flip-vertical" id="importGroupInfo" aria-hidden="true" aria-labelledby="exampleModalTitle"
		 role="dialog" tabindex="-1">
		<div class="modal-dialog modal-top">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="关闭">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">创建分组</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="excelForm">
						<div class="form-group">
							<label class="col-sm-4 col-xs-4 text-right control-label">开始时间：</label>
							<div class="col-sm-8 col-xs-8">
								<input class="form-control input-sm" id="daterange" name="daterange" placeholder="" autocomplete="off"
								          type="text">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 col-xs-4 text-right control-label">时间间隔(分)：</label>
							<div class="col-sm-8 col-xs-8">
								<input class="form-control input-sm" id="longTime" name="longTime" autocomplete="off" type="number" min="0">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 col-xs-4 text-right control-label">每组人数：</label>
							<div class="col-sm-8 col-xs-8">
								<input class="form-control input-sm" id="groupSize" name="groupSize" autocomplete="off" type="number" min="0">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" @click="importGroupInfo">创建</button>
					<button type="button" class="btn btn-default m-0" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>

</div>

<script src="../public/vendor/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../public/vendor/dataTables/jquery.dataTables.js"></script>
<script src="../public/vendor/dataTables/dataTables.bootstrap.js"></script>
<script src="../public/vendor/dataTables-responsive/dataTables.responsive.min.js"></script>
<script src="../public/themes/classic/base/js/app.js"></script>
<!--laydate日期-->
<script src="../public/vendor/laydate/laydate.js"></script>
<!-- jQuery上传插件 -->
<script src="../public/vendor/ajaxfileupload/ajaxfileupload.js"></script>

<!--{表格必须组件}初始化表格，请放在最后引用-->
<script src="../js/table.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			search: {

			},
		},
		methods: {
			/**
			 * 重置搜索栏
			 * @returns
			 */
			reset: function() {

			},
			initTable() {
				// 表格数据请求地址
				var ajaxUrl = baseURL + 'sys/groupInfo/list';
				// 配置表头
				var arr = [{
							"data": "groupName"
						}, {
							"data": "beginTime"
						}, {
							"data": "endTime"
						}, {
							"data": "groupSize"
						}
					]
				// 初始化表格
				TABLE.init(ajaxUrl, arr);
			}
		},
		mounted() {
			this.initTable();
		}
	})

	/**
	 * 导入excel
	 * @returns
	 */
	function importGroupInfo() {
		var startTime = $('#daterange').val();
		var longTime = $('#longTime').val();
		var groupSize = $('#groupSize').val();
		if (longTime === "" || longTime.length === 0) {
			longTime = 0;
		}
		if (groupSize === "" || groupSize.length === 0) {
			layer.msg("分组人数不能小于1");
			return;
		}
		// 开启loadding
		var i = layer.load();
		var data1 = {
			startTime: startTime,
			longTime: longTime,
			groupSize: groupSize
		};
		$.post( baseURL + "sys/groupInfo/import", data1, function(data,status){
			layer.close(i);
			if (data.code === 0) {
				layer.msg('分组成功！');
				$("#importGroupInfo").modal('hide');
				search(false);
			} else {
				layer.alert(data.msg);
			}
		});
	}
	
	laydate.render({
		elem: '#daterange',	
		type: 'datetime'
	});

	/**
		 * 导出excel
		 * @returns
		 */
		function exportExcel() {
			window.open(baseURL + "/api/group/excel/downGroup");
		}

</script>

</body>

</html>
